import { useState, useEffect } from 'react'
import JcyjApi from '../../../../../../utils/apis/JcyjApi'
import useMap from '../hooks/useMap';
import { createLayer } from '../../../../../../utils/helper/mapHelper';
import { Fill, Style } from 'ol/style';
export default function useColorLayer(props) {
    const { type, visible = true } = props;
    const map = useMap();
    useEffect(() => {
        let colorLayer;
        JcyjApi.map_color_jyl().then(resp => {
            if (resp.data) {
                let jyls = resp.data.map(e => {
                    return { name: e.qx, value: e.data, }
                })
                if (type === '1') {
                    jyls = [
                        { name: '翠屏区', value: '1001' },
                        { name: '南溪区', value: '1002' },
                        { name: '长宁县', value: '1000' },
                        { name: '筠连县', value: '1002' },
                        { name: '兴文县', value: '1000' },
                        { name: '叙州区', value: '1001' },
                        { name: '高县', value: '1002' },
                        { name: '江安县', value: '1002' },
                        { name: '珙县', value: '1002' },
                        { name: '屏山县', value: '1000' },
                    ]
                } else if (type === '5') {
                    jyls = [
                        { name: '翠屏区', value: '1001' },
                        { name: '南溪区', value: '1002' },
                        { name: '长宁县', value: '1000' },
                        { name: '筠连县', value: '1002' },
                        { name: '兴文县', value: '1001' },
                        { name: '叙州区', value: '1001' },
                        { name: '高县', value: '1002' },
                        { name: '江安县', value: '1001' },
                        { name: '珙县', value: '1001' },
                        { name: '屏山县', value: '1002' },
                    ]
                }
                const zoneLayer = map.getLayers().getArray().find(l => l.get('layerName') === 'zone-layer')
                colorLayer = createLayer((feature) => {
                    feature.set('yqColors', 'yqColor')
                    //console.log('feature地图函数内部', feature)
                    //监测预警_降雨量设置区域颜色
                    //3.28 注：这个地方可以设置部分颜色值，然后传入相应值绝地区块地图颜色，不在此进行具体临界值判断逻辑，
                    const jyl = jyls?.find(e => e.name === feature.get('name'))?.value
                    let colors = 'rgba(0,0, 0, 0)';
                    if (feature.get('name')) {
                        if (jyl < 25) {
                            colors = 'rgba(56,101,240,0.5)'
                        } else if (jyl >= 25 && jyl < 50) {
                            colors = 'rgba(247,245,0,0.5)'
                        } else if (jyl >= 50 && jyl < 100) {
                            colors = 'rgba(235,142,0,0.5)'
                        } else if (jyl >= 100) {
                            colors = 'rgba(197,34,36,0.5)'
                        }

                        if (jyl === '1000') {//橙色
                            colors = 'rgba(235,142,0,0.5)'
                        } else if (jyl === '1001') {//黄色
                            colors = 'rgba(247,245,0,0.5)'
                        } else if (jyl === '1002') {//蓝色
                            colors = 'rgba(56,101,240,0.5)'
                        } else if (jyl === '1003') {//红色
                            colors = 'rgba(255,255, 0, 0.5)';
                        }

                    }
                    return [new Style({
                        fill: new Fill({
                            color: colors
                        }),

                    })]
                }, zoneLayer.getSource().getFeatures())
                colorLayer.set('visible', visible)
                colorLayer.set('layerName', 'color-layer')
                map.addLayer(colorLayer);
            }

        })

        return () => {
            colorLayer && map.removeLayer(colorLayer)
        }
    }, [map, type, visible])
    return null;
}